<template>
  <div class="swim">
    <div v-if="versions.length > 0" class="versions">
      <div class="version" :class="item.openType ? 'open' : 'close'" v-for="(item, totalIndex) in versions" :key="item.id">
        <div class="title" >
          <div class="icon" @click="versionObjClickHandler(item, totalIndex)">
            <el-icon v-show="!item.openType"><d-arrow-right /></el-icon>
            <el-icon v-show="item.openType"><d-arrow-left /></el-icon>
          </div>
          <div v-show="item.openType" class="content" @click="requireItemClickHander(item)">
            <div class="requireHead">
              <div class="requireType" :style="{color: item.requireType === 'Epic' ? '#520EF9' : item.requireType === 'Feature' ? '#F5A623' : '#4091FD'}">{{item.requireType}}</div>
              <div class="requireName" :title="item.title">{{item.title}}</div>
            </div>
            <div class="requireBody">
              <div class="developType">{{item.developType}}</div>
              <div class="developTime">{{item.date}}</div>
            </div>
          </div>
        </div>

        <transition name="el-fade-in-linear">
          <div v-show="item.openType">
            <div class="body" :style="{height: versionList[index].height + 'px'}" :class="version.openType ? 'open' : 'close'" v-for="(version, index) in item.versions" :key="index">
              <div class="versionTitle" v-show="totalIndex === 0" @click.stop="versionItemClickHandler(version, index)">
                <el-icon v-show="!version.openType"><caret-right /></el-icon>
                <el-icon v-show="version.openType"><caret-bottom /></el-icon>
                {{version.title}}
              </div>
              <el-collapse-transition name="el-fade-in-linear">
                <div class="requireList" v-show="version.openType">
                  <div class="versionItem" v-for="(requireItem, index) in version.children" :key="index" @click="requireItemClickHander(requireItem)">
                    <div class="requireHead">
                      <div class="requireType" :style="{color: version.requireType === 'Epic' ? '#520EF9' : version.requireType === 'Feature' ? '#F5A623' : '#4091FD'}">{{requireItem.requireType}}</div>
                      <div class="requireName" :title="requireItem.title">{{requireItem.title}}</div>
                    </div>
                    <div class="requireBody">
                      <div class="developType">{{requireItem.developType}}</div>
                      <div class="developTime">{{requireItem.date}}</div>
                    </div>
                  </div>
                </div>
              </el-collapse-transition>
            </div>
          </div>
        </transition>
      </div>
    </div>
    <div class="fillBox"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue'
import { DArrowRight, DArrowLeft, CaretRight, CaretBottom } from '@element-plus/icons'
import { useStore } from 'vuex'

export default defineComponent({
  components: { DArrowRight, DArrowLeft, CaretRight, CaretBottom },
  props: {
    versions: Array,
    versionList: Array,
  },
  setup (props, context) {
    const store = useStore()
    const state = reactive({
      show:false,
    })
    

    // 点击收起同行的元素
    const versionItemClickHandler = (item, index) => {
      // @ts-ignore
      props.versions.forEach(epic => {
        // @ts-ignore
        epic.versions[index].openType = !epic.versions[index].openType
      })
    }

    const versionObjClickHandler = (item, index) => {
      if(index > 0) {
        item.openType = !item.openType
      }
    }

    const requireItemClickHander = (item) => {
      store.commit('SET_REQUIREINFO', {
        content: {
          developType: item.developType, 
          id: item.id, 
          pid: item.pid || null, 
          type: item.type
        },
        label: item.title
      })
    }

    return {
      ...toRefs(state),
      versionItemClickHandler,
      versionObjClickHandler,
      requireItemClickHander
    }
  }
})
</script>

<style scoped lang="scss">
.swim {
  display: flex;
  width: 100%;
  .versions {
    // width: 100%;
    // height: 100%;
    display: flex;
    background-color: #f5f5f5;
    .version {
      width: 236px;
      margin-right: 8px;
      &.open {
        min-width: 236px;
      }
      &.close {
        min-width: 64px;
        // height: 112px !important;
        overflow: hidden;
        background-color: #fff;
        max-width: 64px;
        .title {
          height: 100%;
        }
      }
      .title {
        position: relative;
        width: 100%;
        height: 112px;
        background-color: #fff;
        border-radius: 9px;
        border-top: 1px solid transparent;
        box-shadow: 3px 3px 12px 0px rgba(228, 228, 228, 0.5);
        .el-icon {
          &:hover {
            color: #4091FD;
          }
        }
        .icon {
          cursor: pointer;
          width: 100%;
          position: absolute;
          top: 11px;
          left: 17px;
        }
        .content {
          cursor: pointer;
          width: 204px;
          height: 64px;
          min-height: 64px;
          background: rgba(64, 145, 253, 0.05);
          border-radius: 8px;
          border: 2px solid #E3E7EC;
          margin-top: 34px;
          margin-left: 16px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 0 9px;
          .requireHead {
            display: flex;
            font-size: 14px;
            line-height: 20px;
            .requireName {
              margin-left: 4px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .requireBody {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            line-height: 20px;
          }
        }
      }
      .body {
        position: relative;
        width: 100%;
        height: 264px;
        background-color: #fff;
        box-shadow: 3px 3px 12px 0px rgba(228, 228, 228, 0.5);
        border-radius: 9px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 39px;
        padding-bottom: 9px;
        margin-top: 8px;
        &.open {
        }
        &.close {
          height: 30px !important;
          overflow: hidden;
        }
        .versionTitle {
          position: absolute;
          width: 100%;
          top: 11px;
          left: 0;
          cursor: pointer;
          padding-left: 16px;
          font-size: 14px;
          line-height: 20px;
        }
        .versionItem {
          cursor: pointer;
          width: 204px;
          height: 64px;
          min-height: 64px;
          background: rgba(64, 145, 253, 0.05);
          border-radius: 8px;
          border: 2px solid #E3E7EC;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 0 9px;
          margin-bottom: 8px;
          .requireHead {
            display: flex;
            font-size: 14px;
            line-height: 20px;
            .requireName {
              margin-left: 4px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .requireBody {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            line-height: 20px;
          }
        }
      }
    }
  }
  .fillBox {
    flex: 1;
    background-color: #fff;
    border-radius: 9px;
  }
}

</style>